import React, { useState } from "react";
import { connect } from "react-redux";
import { CSSTransition } from "react-transition-group";
import { Link } from "react-router-dom";
import { actionCreators } from "./store";
import { actionCreators as loginActionCreators } from "../../pages/login/store";
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    SearchWrapper,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoList,
    SearchInfoItem,
    NavSearch,
    Addition,
    Button
} from "./style";

function Header(props) {
    const [placeholder, setPlaceholder] = useState("搜索");
    const [spin, setSpin] = useState();

    // const [focused, setFocuesd] = useState(false);

    // const handleInputFocused = () => setFocuesd(true);
    // const handleInputBlur = () => setFocuesd(false);

    const getListArea = () => {
        const {
            focused,
            list,
            page,
            totalPage,
            mouseIn,
            handleMouseEnter,
            handleMouseLeave,
            handleChangePage
        } = props;
        const newList = list.toJS();
        const pageList = [];

        // 添加数据
        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                if (newList[i]) {
                    pageList.push(
                        <SearchInfoItem key={newList[i]}>
                            {newList[i]}
                        </SearchInfoItem>
                    );
                }
            }
        }

        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}>
                    <SearchInfoTitle>
                        热门搜索
                        <SearchInfoSwitch
                            onClick={() =>
                                handleChangePage(page, totalPage, spin)
                            }>
                            <i
                                ref={spin => {
                                    setSpin(spin);
                                }}
                                className="iconfont spin">
                                &#xe7e9;
                            </i>
                            换一换
                        </SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>{pageList}</SearchInfoList>
                </SearchInfo>
            );
        } else {
            return null;
        }
    };

    return (
        <HeaderWrapper>
            <Link to="/">
                <Logo />
            </Link>
            <Nav>
                <NavItem className="left active">首页</NavItem>
                <NavItem className="left">下载App</NavItem>
                {props.loginStatus ? (
                    <NavItem className="right" onClick={props.logout}>
                        退出
                    </NavItem>
                ) : (
                    <Link to="/login">
                        <NavItem className="right">登录</NavItem>
                    </Link>
                )}
                <NavItem className="right">
                    <i className="iconfont">&#xe636;</i>
                </NavItem>
                <SearchWrapper>
                    <CSSTransition
                        timeout={200}
                        in={props.focused}
                        classNames="slide">
                        <NavSearch
                            placeholder={placeholder}
                            className={props.focused ? "focused" : ""}
                            onFocus={() => props.handleInputFocused(props.list)}
                            onBlur={props.handleInputBlur}
                        />
                    </CSSTransition>
                    <i
                        className={
                            props.focused
                                ? "iconfont focused zoom"
                                : "iconfont zoom"
                        }>
                        &#xe800;
                    </i>
                    {getListArea()}
                </SearchWrapper>
            </Nav>
            <Addition>
                <Link to="/write">
                    <Button className="writing">
                        <i className="iconfont">&#xe759;</i>写文章
                    </Button>
                </Link>

                <Button className="reg">注册</Button>
            </Addition>
        </HeaderWrapper>
    );
}

const mapStateToProps = state => {
    return {
        focused: state.getIn(["header", "focused"]),
        list: state.getIn(["header", "list"]),
        page: state.getIn(["header", "page"]),
        mouseIn: state.getIn(["header", "mouseIn"]),
        totalPage: state.getIn(["header", "totalPage"]),
        loginStatus: state.getIn(["login", "loginStatus"])
    };
};

const mapDispatchToProps = dispatch => {
    return {
        handleInputFocused(list) {
            list.size === 0 && dispatch(actionCreators.getList());
            dispatch(actionCreators.searchFocus());
        },
        handleInputBlur() {
            dispatch(actionCreators.searchBlur());
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter());
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave());
        },
        handleChangePage(page, totalPage, spin) {
            spin.classList.toggle("rotate-one-turn");
            if (page < totalPage) {
                dispatch(actionCreators.changePage(page + 1));
            } else {
                dispatch(actionCreators.changePage(1));
            }
        },
        logout() {
            dispatch(loginActionCreators.logout());
        }
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Header);
